<template>
  <el-dialog
    class="quCodeDialog"
    :model-value="centerDialogVisible"
    append-to-body
    @close="closeDialog"
    :title="carouseIndex == 0 ? '报名听课' : '扫码报名'"
    align-center
  >
    <div class="content">
      <div class="qrCode">
        <QrcodeGenerator
          text="二维码链接地址"
          :size="150"
          level="H"
          style="z-index: 99"
          class="code-box"
        />
      </div>
      <p>
        扫码包报名或
        <span class="openLink" @click="openLink()">点击打开链接</span> 报名
      </p>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
//   import { ref } from 'vue';
// 前端生成二维码组件
import QrcodeGenerator from '@/components/QrcodeGenerator/index.vue';

// 弹窗状态
const emit = defineEmits(['update:centerDialogVisible']);

// 接收来自父组件的 centerDialogVisible 作为 props
const { centerDialogVisible, carouseIndex } = defineProps({
  centerDialogVisible: {
    type: Boolean,
    required: true,
  },
  carouseIndex: {
    type: Number,
    required: true,
  },
});

// 关闭弹窗的函数，触发 emit，通知父组件更新 centerDialogVisible
const closeDialog = () => {
  emit('update:centerDialogVisible', false);
};

// 打开链接
const openLink = () => {};
</script>
<style lang="scss" scoped src="./index.scss"></style>
